import React, { useState } from 'react';
import style from './FormData.module.less';
import { Picker, Input, DatePicker, Image, Cascader, CenterPopup, TextArea } from 'antd-mobile';
import { getTime } from "../../util/utils";
import Sensitivity from '../../Component/Sensitivity'

export default function FormData(props: any) {
    // console.log(props);
    const [visible, setVisible] = useState(false);
    const [visible2, setVisible2] = useState(false);
    const [visible3, setVisible3] = useState(false);
    const [visible4, setVisible4] = useState(false);
    const [visible5, setVisible5] = useState(false);
    const [columns, setColumns] = useState<Array<any>>([]);
    const [treeList, setTreeList] = useState<Array<any>>([]);
    let [selectKey, setSelectKey] = useState<string>("");
    let [min,setMin] = useState();
    let [max,setMax] = useState();
	return (
		<div className={style.formData}>
            {
				props.formData.map((item:any,index:number) => 
					item.isShow ? 
					<div key={`formData_${index}`} className={style.items}>
						<div className={style.item_label}>
                            <div className={style.label_text}>
                                {item.label}
                                {
                                    item.icon ? <Image className={style.icon} lazy src={require("./img/query.png")} fit='fill' onClick={()=>setVisible5(true)}/> : ""
                                }
                            </div>
                            {
                                item.type === "count" ?
                                <div className={style.label_count}>
                                    <Image className={style.count_icon} lazy src={require("./img/reduce.png")} fit='fill' onClick={()=>reduce(item)}/>
                                    <div>{item.value}</div>
                                    <Image className={style.count_icon} lazy src={require("./img/add.png")} fit='fill' onClick={()=>add(item)}/>
                                </div> : ""
                            }
                        </div>
						<div className={style.item_value}>
                            {
                                item.type === "show" ?
                                <div className={item.value ? style.value_black : style.value_placeholder}>
                                    {item.value}
                                </div> : ""
                            }
                            {
                                item.type === "input" ? 
                                <Input
                                    className={style.input}
                                    placeholder={item.placeholder}
                                    maxLength={item.maxlength}
                                    value={item.value}
                                    onChange={(event: string) => {
                                        changeIpt(event,item);
                                    }}
                                /> : ""
                            }
                            {
                                item.type === "textArea" ? 
                                <TextArea
                                    className={style.textArea}
                                    placeholder={item.placeholder}
                                    value={item.value}
                                    rows={3}
                                    onChange={val => {
                                        changeIpt(val,item)
                                    }}
                                /> : ""
                            }
                            {
                                item.type === "Sensitivity" ? 
                                <Sensitivity
                                    className={style.input}
                                    placeholder={item.placeholder}
                                    type={item.searchType}
                                    msg={item.value}
                                    isInput={true}
                                    keys={item.key}
                                    maxLength={item.maxlength}
                                    onChange={(val:any)=>changeIpt(val,item)}
                                /> : ""
                            }
                            {
								item.type === "select" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>select(index,item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
							}
                            {
                                item.type === "datePick" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>dateSelect(index,item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
                            }
                            {
								item.type === "goSearch" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>goSearch(index, item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
							}
                            {
								item.type === "adrTree" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>treeSelect(index,item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
							}
                            {
								item.type === "rz" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>rzSelect(index,item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
							}
                            {
								item.type === "selectSX" ? 
								<div className={item.values.label ? style.value_black : style.value_placeholder} onClick={()=>goSx(index,item)}>
                                    {item.values.label || item.placeholder}
                                    <Image lazy src="https://static.ywtbsupappz.sh.gov.cn/jmportal_hd/web/images/quu/arrow-right.png" fit='fill' width={16}/>
                                </div> : ""
							}
						</div>
					</div> : ""
				)
			}
            <Picker
                columns={[columns]}
                visible={visible}
                onClose={() => { setVisible(false) }}
                onConfirm={v => onConfirm(v)}
            />
            <DatePicker
                title='时间选择'
                visible={visible2}
                onClose={() => { setVisible2(false) }}
                min={min}
                max={max}
                onConfirm={val => { onDateConfirm(val) }}
            />
            <Cascader
                options={treeList}
                visible={visible3}
                onClose={() => { setVisible3(false) }}
                onConfirm={(value, extend)=> confirmTree(value, extend)}
            />
            <Picker
                columns={[columns]}
                visible={visible4}
                onClose={() => { setVisible4(false) }}
                onConfirm={v => onConfirmRz(v)}
            />
            <CenterPopup
                visible={visible5}
                // onMaskClick={() => { setVisible5(false)}}
            >
                <div className={style.myContent}>
                    <div className={style.tit}>温馨提示</div>
                    <div className={style.sec}>
                        <div className={style.text}>1.如无需办理认证，请选择 <span className={style.text_span}>否</span></div>
                        <div className={style.text}>2.如自行办理认证，请选择 <span className={style.text_span}>是</span></div>
                        <div className={style.text}>3.如需我处代为办理认证，请选择 <span className={style.text_span}>代办</span></div>
                        <div className={style.hint}>代办认证仅支持办理单认证，双认证请选择是后自行办理</div>
                    </div>
                    <div className={style.btn} onClick={() => { setVisible5(false)}}>知道了</div>
                </div>
            </CenterPopup>
        </div>
	);
    function select(index:number,item:any){
        setColumns(item.arr);
        setVisible(true);
        setSelectKey(item.key);
    }
    function dateSelect(index:number,item:any){
        setSelectKey(item.key);
        let minDate:any = new Date(item.minDate)
        let maxDate:any = new Date(item.maxDate)
        setMin(minDate);
        setMax(maxDate);
        setVisible2(true);
    }
    function goSearch(index:number, item:any){
        console.log(index,item.searchType, props);
        props.goSearch(item.key,item);
    }
    function goSx(index:number, item:any){
        console.log(index,item.searchType, props);
        props.goSx(item.key,item);
    }
    function treeSelect(index:number,item:any){
        setTreeList(item.arr)
        setVisible3(true)
        setSelectKey(item.key);
    }
    function rzSelect(index:number,item:any){
        setColumns(item.arr);
        setVisible4(true);
        setSelectKey(item.key);
    }
    function changeIpt(event: string, item:any){
        console.log(event);
        props.onConfirm(item.key,event);
    }
    function onConfirm(item:any){
        let vlaue = columns.filter((items) => {return items.value === item[0]});
        props.onConfirm(selectKey,vlaue[0]);
    }
    function onDateConfirm(item:any) {
        // console.log(item.toDateString());
        let value = {
            label: getTime(new Date(item).valueOf(), "day", "3", "-", 0),
            value: getTime(new Date(item).valueOf(), "day", "3", "", 0)
        }
        props.onConfirm(selectKey,value);
    }
    function confirmTree(value:any, extend:any){
        let newList = treeList;
        let arr:Array<any> = []
        newList.forEach((item, index) => {
            if (item.value === value[0]) {
                arr.push(item)
                if (item.children.length) {
                    item.children.forEach((it:any, index2:number) => {
                        if (it.value === value[1]) {
                            arr.push(it)
                            if (it.children.length) {
                                it.children.forEach((it2:any, index3:number) => {
                                    if (it2.value === value[2]) {
                                        arr.push(it2)
                                    }
                                })
                            }
                        }
                    })
                }
            }
        })
        let values = {
            label: `${arr[0].label}/${arr[1].label}/${arr[2].label}`,
            value: `${arr[0].value}/${arr[1].value}/${arr[2].value}`
        }
        console.log(arr,values);
        props.onTreeConfirm(selectKey, arr, values);
    }
    function onConfirmRz(item:any){
        console.log(columns);
        let vlaue:any = columns.filter((items) => {return items.value === item[0]});
        console.log(vlaue, item, "vlaue")
        props.onConfirm(selectKey,vlaue[0]);
        if (vlaue[0].label === "代办") {
            props.onDb(selectKey);
        }
    }
    function reduce(item:any){
        props.onCount(item.key, "reduce");
    }
    function add(item:any){
        props.onCount(item.key, "add")
    }
}
